<style lang="scss" type="text/scss">
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
<template>
  <el-form ref="projectForm" :rules="rules" :model="form" label-width="80px" enctype="multipart/form-data">
    <el-form-item label="添加图片">
      <el-upload class="avatar-uploader" name="photoFile"
                 action="/admin/topic/uploadTopicPhoto.htm"
                 :show-file-list="false" :on-success="handleAvatarSuccess"
                 :before-upload="beforeAvatarUpload">
        <img v-if="form.photoUrl" :src="form.photoUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </el-form-item>
    <el-form-item label="主题名称" prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="主题类型" prop="type">
      <el-input v-model="form.type"></el-input>
    </el-form-item>
    <el-form-item label="主题价格" prop="amount">
      <el-input type="number" v-model="form.amount"></el-input>
    </el-form-item>
    <el-form-item label="预定时间" prop="preOrderTimeRange">
      <el-input placeholder="预定时间范围限制" type="number" v-model="form.preOrderTimeRange"></el-input>
    </el-form-item>
    <el-form-item label="主题等级" prop="level">
      <el-rate style="margin-top:10px;" v-model="form.level"></el-rate>
    </el-form-item>
    <el-form-item label="游戏人数">
      <el-row style="width:315px;">
        <el-col :span="10">
          <el-form-item>
            <el-input-number v-model="form.supportMinUserNum" controls-position="right" size="mini" :min="1"
                             :max="20"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col style="text-align:center;" :span="2">-</el-col>
        <el-col :span="10">
          <el-form-item>
            <el-input-number v-model="form.supportMaxUserNum" controls-position="right" size="mini" :min="1"
                             :max="20"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col style="text-align:center;" :span="2">人</el-col>
      </el-row>
    </el-form-item>
    <!-- <el-form-item label="场次模板">
      <el-select v-model="form.template" placeholder="请选择模板">
        <el-option label="模板一" value="shanghai"></el-option>
        <el-option label="模板二" value="beijing"></el-option>
      </el-select>
    </el-form-item> -->
    <el-form-item label="主题简介" prop="desc">
      <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="form.desc"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
  let defaultForm = {
    id: '',
    photoUrl: 'sdfdsf', // 图片地址
    name: '', // 主题名称
    type: '', // 类型
    amount: '', // 价格
    level: 1, // 游戏难度
    // 游戏人数
    supportMinUserNum: '',
    supportMaxUserNum: '',
    preOrderTimeRange: '',
    // template: '', // 场次模板
    desc: '' // 简介
  };
  export default {
    name: 'editForm',
    props: {
      formItem: {
        type: Object,
        required: true
      }
    },
    watch: {
      formItem: {
        handler(form) {
          this.init();
        },
        deep: true
      }
    },
    data() {
      return {
        form: {},
        imageData: {
          shopId: 232323,
          platformId: 23323223
        },
        rules: {
          name: [
            {required: true, message: '请输入主题名称', trigger: 'blur'},
            {min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur'}
          ],
          type: [
            {required: true, message: '请输入主题类型', trigger: 'blur'},
            {min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur'}
          ],
          amount: [
            {
              required: true,
              message: '请输入主题价格',
              trigger: 'blur'
            }
          ],
          preOrderTimeRange: [
            {
              required: true,
              message: '请输入最短预定时间',
              trigger: 'blur'
            }
          ],
          desc: [{required: true, message: '请填写主题简介', trigger: 'blur'}]
        }
      };
    },
    created() {
      this.init();
    },
    methods: {
      init() {
        this.form = Object.assign({}, defaultForm, this.formItem);
      },
      handleAvatarSuccess(res, file) {
        this.form.photoUrl = res.data.topicVo.photoUrl;
        // this.form.photoUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$message.error('上传图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    }
  };
</script>
